<template>
    <div class="alarm-device">
      <h2>报警装置</h2>
      
      <!-- 添加报警 -->
      <div class="add-alarm">
        <input v-model="newAlarmTitle" placeholder="报警标题" />
        <input v-model="newAlarmMessage" placeholder="报警内容" />
        <button @click="addAlarm">添加报警</button>
      </div>
  
      <!-- 报警列表 -->
      <div v-for="(alarm, index) in alarms" :key="index" class="alarm-item">
        <div class="alarm-info">
          <span class="alarm-title">{{ alarm.title }}</span>
          <span class="alarm-message">{{ alarm.message }}</span>
        </div>
        <div class="alarm-time">{{ alarm.time }}</div>
        <div class="alarm-actions">
          <button @click="clearAlarm(index)">清除报警</button>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  
  export default defineComponent({
    name: 'AlarmDevice',
    setup() {
      // 定义报警信息的类型
      interface Alarm {
        title: string;
        message: string;
        time: string;
      }
  
      // 定义报警列表
      const alarms = ref<Alarm[]>([
        {
          title: '系统警告',
          message: '服务器负载过高',
          time: new Date().toLocaleString(),
        },
        {
          title: '安全警告',
          message: '检测到异常登录',
          time: new Date().toLocaleString(),
        },
      ]);
  
      // 添加报警
      const newAlarmTitle = ref<string>('');
      const newAlarmMessage = ref<string>('');
  
      const addAlarm = () => {
        if (newAlarmTitle.value.trim() && newAlarmMessage.value.trim()) {
          alarms.value.push({
            title: newAlarmTitle.value,
            message: newAlarmMessage.value,
            time: new Date().toLocaleString(),
          });
          newAlarmTitle.value = '';
          newAlarmMessage.value = '';
        } else {
          alert('请输入完整的报警信息！');
        }
      };
  
      // 清除报警
      const clearAlarm = (index: number) => {
        alarms.value.splice(index, 1);
      };
  
      return {
        alarms,
        newAlarmTitle,
        newAlarmMessage,
        addAlarm,
        clearAlarm,
      };
    },
  });
  </script>
  
  <style scoped>
  .alarm-device {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  .add-alarm {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .add-alarm input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  
  .add-alarm button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .add-alarm button:hover {
    background-color: #45a049;
  }
  
  .alarm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
  }
  
  .alarm-title {
    font-weight: bold;
    color: #ff4444;
  }
  
  .alarm-message {
    color: #666;
  }
  
  .alarm-time {
    color: #999;
    margin-left: 10px;
  }
  
  .alarm-actions button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .alarm-actions button:hover {
    background-color: #cc0000;
  }
  </style>